<!DOCTYPE html>
<html lang="en">
<head>
    <title>公司进个人管理层</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=4a6c1b54">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        .reginTd {
            max-width: 105px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .row {
            margin-right: -15px;
            margin-left: 0px;
        }

        .col-lg-6, .col-xs-6, .col-md-6 {
            padding-left: 0;
        }
        .nav-tabs-custom{
            margin-bottom: 10px;
        }
        .boxs{
            width:100%;
            display: flex;
            justify-content: space-around;
            border:1px solid #cbcbcd;
            line-height: 24px;
            margin-bottom: 10px;
        }
        .lefts{
            width:50%;
            text-align: center;
            border-right: 1px solid #cbcbcd;
            background: #228bee;
            border-bottom: 1px solid #fff;
            color: #fff;
        }
        .rights{
            width:50%;
            text-align: center;
        }
        .lineOne {
            text-align: left;
        }

        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }

    </style>
</head>
<body>
<section class="content" id="app">
    <div class="div-td-content-more"><i></i></div>
    <div style="padding: 0 10px;background: #fff;" id="visitDepart">
        <div style="width: 1100px;margin: 0 auto;" class="mScrollBox">
            <table class="table text-center table-width table-bordered">
                <thead>
                <tr>
                    <th style="width: 14%;" class="tableTitle">日期</th>
                    <th style="width: 6%;" class="tableTitle">完成</th>
                    <th style="width: 6%;" class="tableTitle">考勤签到<br>时间</th>
                    <th style="width: 6%;" class="tableTitle">首次面访<br>签到时间</th>
                    <th style="width: 6%;" class="tableTitle">时间间隔</th>
                    <th style="width: 6%;" class="tableTitle">距离间隔<br>(公里)</th>
                    <th style="width: 6%;" class="tableTitle">时速(km/h)</th>
                    <th style="width: 6%;border-left: 2px solid #169bd5;" class="tableTitle">考勤签退<br>时间</th>
                    <th style="width: 6%;" class="tableTitle">末次面访<br>签退时间</th>
                    <th style="width: 6%;" class="tableTitle">时间间隔</th>
                    <th style="width: 6%;" class="tableTitle">距离间隔<br>(公里)</th>
                    <th style="width: 6%;" class="tableTitle">时速<br>(km/h)</th>
                    <th style="width: 20%;" class="tableTitle">区域</th>
                </tr>
                </thead>
                <tbody v-cloak>
                <tr v-for="(item,i) in visitCustomer.faceList">
                    <td>{{item.signDate}}</td>
                        <td style="color:#169BD5;cursor: pointer" @click="openInterview(item,'1')">
                            {{item.customerNum}}
                        </td>
                    <td class="lineOne">
                        <span style="text-align: center">{{item.signTime.split(' ')[1]}}</span>
                    </td>
                    <td class="lineOne">
                        <span style="text-align: center">{{item.arrivalsTime.split(' ')[1]}}</span>
                    </td>
                    <td class="lineOne" style="border-left: 1px solid #cbcbcd;border-right: 1px solid #cbcbcd;">
                        <span style="text-align: center;" :style="timeJq(item.signInTimeDiff)?'':''">{{addZeroHour(quMiao(item.signInTimeDiff))}}</span>
                    </td>
                    <td class="lineOne">
                        <span style="text-align: center" :style="dJq(item.signInDistance)>15?'':''" v-if="item.signInTimeDiff != ''">{{dJq(item.signInDistance)}}</span>
                    </td>
                    <td class="lineOne">
                        <span style="text-align: center">{{disJq(item.signInSpeed)}}</span>
                    </td>
                    <td class="lineOne" style="border-left: 2px solid #169bd5;">
                        <span style="text-align: center">{{item.signOutTime.split(' ')[1]}}</span>
                    </td>
                    <td class="lineOne">
                        <span style="text-align: center">{{item.leaveTime.split(' ')[1]}}</span>
                    </td>
                    <td class="lineOne">
                        <span style="text-align: center;" :style="timeJq(item.signOutTimeDiff)?'':''">{{addZeroHour(quMiao(item.signOutTimeDiff))}}</span>
                    </td>
                    <td class="lineOne">
                        <span style="text-align: center" :style="dJq(item.signOutDistance)>15?'':''" v-if="item.signOutTimeDiff != ''">{{dJq(item.signOutDistance)}}</span>
                    </td>
                    <td class="lineOne">
                        <span style="text-align: center">{{disJq(item.signOutSpeed)}}</span>
                    </td>
                    <td style="border-left: 1px solid #cbcbcd;text-align: left;" class="lineOne">
                        <span>{{item.regionName}}</span>
                    </td>

                </tr>
                <!--<tr>-->
                    <!--<td>合计</td>-->
                    <!--<td v-if="(visitCustomer.time.length==10 && a==1) || visitCustomer.time.length!=10 ">{{allDate[1].allComplete}}</td>-->
                    <!--<td v-if="(visitCustomer.time.length==10 && a==1) || visitCustomer.time.length!=10 ">-</td>-->
                    <!--<td>-</td>-->
                    <!--<td>-</td>-->
                    <!--<td v-if="visitCustomer.time.length!=10">{{allDate[1].signManagerNum}}</td>-->
                    <!--<td v-if="visitCustomer.time.length!=10">{{allDate[1].ycNum}}</td>-->
                    <!--<td v-if="visitCustomer.time.length!=10">-</td>-->
                    <!--<td>-</td>-->
                    <!--<td  v-if="visitCustomer.time.length==10">-</td>-->
                    <!--<td  v-if="visitCustomer.time.length==10">-</td>-->
                    <!--<td  v-if="visitCustomer.time.length==10">-</td>-->
                    <!--<td  v-if="visitCustomer.time.length==10">-</td>-->
                    <!--<td  v-if="visitCustomer.time.length==10">-</td>-->
                    <!--<td  v-if="(visitCustomer.time==today && a==1)||visitCustomer.time==yesterday&&visitCustomer.time.length==10">-</td>-->
                    <!--<td  v-if="(visitCustomer.time==today && a==1)||visitCustomer.time==yesterday&&visitCustomer.time.length==10">-</td>-->
                    <!--<td  v-if="(visitCustomer.time==today && a==1)||visitCustomer.time==yesterday&&visitCustomer.time.length==10">-</td>-->
                    <!--<td  v-if="(visitCustomer.time==today && a==1)||visitCustomer.time==yesterday&&visitCustomer.time.length==10">-</td>-->
                    <!--<td  v-if="(visitCustomer.time==today && a==1)||visitCustomer.time==yesterday&&visitCustomer.time.length==10">-</td>-->
                    <!--<td  v-if="visitCustomer.time==today && a==0">-</td>-->
                <!--</tr>-->
                </tbody>
            </table>
        </div>
    </div>

    <!-- /.box-body -->
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=602456c3"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=6348cbbc"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/plugins/highcharts/highcharts.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + 80+ "px",
                        "left": $(this).offset().left - 6,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    console.log(urlConfig);
    var app = new Vue({
        el: '#app',
        data: {
            currentUser: getCurrentUser(),
            userId: $.wyui.page.urlParams.userId,
            dateTime: $.wyui.page.urlParams.dateTime,
            managerName:$.wyui.page.urlParams.managerName,
            visitCustomer: {
                time: $.wyui.page.urlParams.dateTime,
                faceList: [],
            },
            allDate: [
                {"allComplete": "", "completionRate": "","ycNum":""},
                {"allComplete": "", "completionRate": ""}
            ],
        },
        methods: {
            isFair: function (item) {
                var str = '';
                if (!this.distanceJq(item.signInDistance) && !this.timeJq(item.signInTimeDiff)) {
                    str = "距离、时间不合理"
                }
                else if (!this.distanceJq(item.signInDistance)) {
                    str = "距离不合理"
                }
                else if (!this.timeJq(item.signInTimeDiff)) {
                    str = "时间不合理"
                }
                return str
            },
            //距离合理->true 不合理->false
            distanceJq: function (d) {
                var str = d.replace("公里", "");
                return Number(str) < 15
            },
            //时间合理->true 不合理->false
            timeJq: function (t) {
                if(t.indexOf("小时")>0){
                    var hour = t.split("小时")[0];
                    if(Number(hour)>0){
                        return false;
                    }
                }else{
                    if(t.indexOf("分")>0){
                        var min = t.split("分")[0];
                        if(Number(min)>30){
                            return false;
                        }
                    }else{
                        return true;
                    }
                }
                return true;
            },
            //时间间隔
            dJq: function (d) {
                var str = d.replace("公里", "");
                if (str == '0') {
                    return '';
                } else {
                    return Number(str).toFixed(2);
                }
            },
            //距离间隔
            disJq: function (dis) {
                var str = dis.replace("km/h", "");
                return str;
            },
            //去秒加0几分
            quMiao: function (m) {
                if (!m)return ""
                //1小时11分11秒
                var hour ="0"
                var min ="0"
                var sec ="0"

                if (m.indexOf("小时")>0){
                    //{1  , 11分11秒}
                    hour= m.split("小时")[0]
                }
                if (m.indexOf("分")>0){
                    //{1小时11，11秒}
                    min = m.split("分")[0]
                    if (min.indexOf("小时")>0){
                        //{1,11}
                        min= min.split("小时")[1]
                    }
                    if (Number(min)<10){
                        min = "0"+ min
                    }
                }
                if (min == "0" && m.indexOf("秒")>0){
                    //21秒
                    return hour+"小时01分"
                }
                return hour+"小时"+min+"分"
            },
            //添加0小时xx分
            addZeroHour:function(h){
                if(!h){
                    return ""
                }
                if (h.indexOf('小时') > 0) {
                    return h
                }else{
                    return "0小时"+h
                }
            },
            getCount: function (arr, key) {
                var number = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    number += (arr[i][key] && arr[i][key] != '-' ? arr[i][key] : 0)

                }
                return number;
            },
            getAll: function (arr, type) {
                console.log(this.regionInfo)
                if (type == "0") {
                    this.allDate[0].target = this.getCount(arr, "target");
                    this.allDate[0].allComplete = this.getCount(arr, "complete");
                    this.allDate[0].signManagerNum = this.getCount(arr, "signManagerNum");
                    /*
                     this.allDate[0].averageComplete = (this.allDate[0].allComplete / this.allDate[0].signManagerNum).toFixed(2);
                     */
                    if (this.allDate[0].target == 0) {
                        this.allDate[0].completionRate = "0.00%";
                    } else {
                        this.allDate[0].completionRate = (this.allDate[0].allComplete / this.allDate[0].target * 100).toFixed(2) + "%";
                    }
                } else {
                    this.allDate[1].target = this.getCount(arr, "target");
                    this.allDate[1].allComplete = this.getCount(arr, "complete");
                    this.allDate[1].signManagerNum = this.getCount(arr, "signManagerNum");
                    this.allDate[1].ycNum = this.getCount(arr,"ycNum");
                    /*
                     this.allDate[1].averageComplete = (this.allDate[1].allComplete / this.allDate[1].signManagerNum).toFixed(2);
                     */
                    if (this.allDate[1].target == 0) {
                        this.allDate[1].completionRate = "0.00%";
                    } else {
                        this.allDate[1].completionRate = (this.allDate[1].allComplete / this.allDate[1].target * 100).toFixed(2) + "%";
                    }
                }
            },
            isCheckRegionName: function (item) {
                var that = this;
                if (that.isHasregionNameOp(item.departName)) {
                    return true
                }
                else {
                    return false
                }
            },
            //获取异常天数
            getSignAndCustomerByUserId: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.report.visitCustomer.getSignAndCustomerByUserId, {
                    "userId": that.userId,
                    "dateTime": that.visitCustomer.time
                }, function (data) {
                    console.log(data);
                    var data = trimRN2(data);
                    that.visitCustomer.faceList = data;
                });
            },
            openInterview: function (item, type) {
                var that = this;
                top.closeTabByPageId("khList2");
                top.addTabs({
                    id: 'khList2',
                    title: that.managerName + '面访',
                    close: true,
                    url: 'reportForm/interview/interviewCustomerList.html?userId=' + that.userId + "&dateTime=" + item.signDate + "&name=" + that.managerName + "&type=" + type,
                });
            },
        },
        mounted: function () {
            var that = this;
            that.getSignAndCustomerByUserId();
        }
    });
</script>
</body>
</html>